<% css=[[
	#log_text{
		padding:10px;
		text-align:left;
		height:700px;
		width:1000px;
		overflow:auto;
		overflow-x:scroll;
		background-color:#F5F5F5;
	}
	#log_text pre{
		border:none;
		white-space:pre;
		word-break:break-all;
		margin:0;
		background-color:#F5F5F5;
	}
	.description{
		color:#ffffff;
		background-color:#0099ff;
	}
]]
%>

<%+header%>

<div class="cbi-map">
	<h2 name="content"><%:OpenVPN Server%> - <%:Log Data%></h2>
	<fieldset class="cbi-section">
		<fieldset class="cbi-section-node">
			<div id="log_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading...%>" style="vertical-align:middle"/><%:Collecting data...%></div>
			<div style="text-align:right"><small><%:Refresh every 5 seconds.%></small></div>
		</fieldset>
	</fieldset>
</div>

<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<script type="text/javascript">//<![CDATA[
	var log_id=document.getElementById('log_text');
	XHR.poll(5,'<%=luci.dispatcher.build_url("admin","vpn","openvpn-server","logdata")%>',null,function(x,data){
		if (log_id&&data){
			log_id.innerHTML=String.format(
				'<pre>%s</pre>',
				data.syslog || '<%:No log data.%>'
			);
		}else if (log_id){
			log_id.innerHTML='<strong><%:Error get log data.%></strong>';
		}
	});
//]]></script>

<%+footer%>
